/**
 * 使用vue插件封装全局指令
 */
import { useIntersectionObserver } from '@vueuse/core'
// 导入加载失败显示的图片
import DefImg from '@/assets/images/load.gif'

export default {
  install (app) {
    /**
     * border指令
     * 作用：给绑定的元素添加边框
     * 使用示例：<p v-border></p>
     * 语法：app.directive('指令名', { mounted(){} })
     */
    app.directive('border', {
      // 使用border指令的元素挂在后执行
      /**
       *
       * @param {*} el  使用border指令的dom元素
       * @param {*} binding 获取指令上绑定的data变量
       */
      mounted (el, binding) {
        console.log('指令：', el, binding)
        el.style.border = `10px solid ${binding.value}`
      }
    })

    app.directive('ilazy', {
      /**
       * 作用：图片进入可视区才进行下载和渲染
       * 示例：<img v-ilazy="图片的url地址" />
       * @param {*} el  使用指令的dom元素
       * @param {*} binding 获取指令上绑定的data变量
       */
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          el, // == 指定要监控的元素或组件 ==
          ([{ isIntersecting }]) => {
            // console.log('新鲜好物:', isIntersecting ? '进入可视区' : '离开可视区')
            /**
               * 实现数据懒加载？
               * 1. 通过参数：isIntersecting =》 true 进入可视区 | false 离开可视区
               * 2. 在isIntersecting=true 发请求获取数据并渲染
               */
            if (isIntersecting) {
              // == 只有当前图片进入可视区，才给图片src赋值 ==
              el.src = binding.value

              // 图片加载失败处理=>显示默认图片
              el.onerror = () => {
                el.src = DefImg
              }

              stop()
            }
          },
          //  进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          {
            threshold: 0
          }
        )
      }
    })
  }
}
